<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onUnload, onHide } from '@dcloudio/uni-app';
import { getDanCiApi } from '../../api/request.js';
import { numberToChinese, includeListGetItem } from '../../utils/index.js';
const props = defineProps({});
// 1美 2英
const type = ref(2);
onMounted(() => {});
let platform = uni.getStorageSync('platform');
const bei = ref([]);
const query = ref({
    word_ids: '',
    index: 0
});
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
const list = ref([]);
onLoad(async (e) => {
    if (uni.getStorageSync('bofangmoshi')) {
        type.value = uni.getStorageSync('bofangmoshi');
    }
    query.value.word_ids = e.id;
    let res = await getDanCiApi(query.value);
    let arr = [];
    for (let i = 0; i < res.data.length; i += 5) {
        arr.push(res.data.slice(i, i + 5));
    }
    list.value = arr;
    bei.value = JSON.parse(JSON.stringify(arr));
    console.log(bei.value);
});
const getIdList = ref([]);
const statusList = ref({});
const playAudio = (id, url) => {
    let http =
        type.value == 1
            ? 'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/'
            : 'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
    console.log(`https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/${url}`);
    uni.$emit('playAudio', http + `${url}`, true);
    const index = statusList.value.id == id;
    if (!index) {
        statusList.value.id = id;
        statusList.value.status = 1;
    } else {
        statusList.value.status =
            statusList.value.status == 1
                ? 2
                : statusList.value.status == 2
                ? 3
                : statusList.value.status == 3
                ? 4
                : 1;
        if (statusList.value.status == 3 && getIdList.value.length != list.value.length) {
            const indexs = getIdList.value.findIndex((item) => item == id);
            if (indexs == -1) {
                return;
                getIdList.value.push(id);
            }
        }
    }
};
const returnStatus = (id) => {
    const index = statusList.value.id == id;
    if (index) {
        const status = statusList.value.status;
        if (status === 1) {
            return true;
        } else if (status === 2) {
            return false;
        }
    }
    return false;
};
const onclick = (e) => {
    console.log(e);
    let index = e.index;
    if (e.item.action == '1') {
        // 拓展
        uni.navigateTo({
            url: '/pages/common/tuozhan'
        });
    } else if (e.item.action == '2') {
        // 拼读
        uni.navigateTo({
            url: '/pages/common/pindu'
        });
    } else {
        // 纠错
        // 手机摄像头拍照
    }
};
const last = () => {
    if (list.value[query.value.index].length) {
        return;
    }
    query.value.index = query.value.index == 0 ? 0 : query.value.index - 1;
};
const next = () => {
    if (list.value[query.value.index].length) {
        return;
    }
    query.value.index =
        query.value.index == list.value.length - 1 ? list.value.length - 1 : query.value.index + 1;
};

const status = ref(0);
const boxStaus = ref([[], [], []]);
const remove = (id) => {
    if (status.value == 0) {
        list.value[query.value.index] = list.value[query.value.index].filter((item) => {
            if (item.id == id) {
                boxStaus.value[1].push(item);
            }
            return item.id != id;
        });
        if (!list.value[query.value.index].length) {
            query.value.index == list.value.length - 1 ? '' : query.value.index++;
            statusList.value = {};
        }
    }
};
const images = [
    '/static/img/wolrd/lv.png',
    '/static/img/wolrd/lanhe.png',
    '/static/img/wolrd/hong.png'
];
const studyStatus = (index) => {
    if (status.value == 0 && index == 1 && list.value[query.value.index].length < 1) {
        status.value = 1;
        query.value.index = 0;
        let arr = [];
        for (let i = 0; i < boxStaus.value[1].length; i += 5) {
            arr.push(boxStaus.value[1].slice(i, i + 5));
        }
        list.value = arr;
        boxStaus.value[1] = [];
    }
    if (index == 2 && boxStaus.value[2].length && !list.value[query.value.index].length) {
        status.value = 1;
        console.log(status.value);
        query.value.index = 0;
        let arr = [];
        for (let i = 0; i < boxStaus.value[2].length; i += 5) {
            arr.push(boxStaus.value[2].slice(i, i + 5));
        }
        console.log(arr);
        list.value = arr;
        boxStaus.value[2] = [];
    }
};
const ssss = (item, indexss) => {
    boxStaus.value[indexss].push(item);
    list.value[query.value.index] = list.value[query.value.index].filter((items) => {
        return items.id != item.id;
    });
    if (!list.value[query.value.index].length) {
        if (query.value.index == list.value.length - 1) {
            status.value = 2;
            statusList.value = {};
        } else {
            query.value.index++;
        }
    }
};
const showButtomModel = ref(null);
const defaults = () => {
    status.value = 1;
    query.value.index = 0;
    boxStaus.value = [[], [], []];
    showButtomModel.value.close();
    studyWorld.value = [];
};
const agin = (index) => {
    if (index == 0) {
        console.log(bei.value);
        list.value = JSON.parse(JSON.stringify(bei.value));
        defaults();
    } else {
        showButtomModel.value.open('bottom');
    }
};
const studyWorld = ref([]);
const add = (index) => {
    const weizhi = includeListGetItem(studyWorld.value, index);
    if (weizhi != -1) {
        studyWorld.value.splice(weizhi, 1);
    } else {
        studyWorld.value.push(index);
    }
};
const tijiao = () => {
    if (studyWorld.value.length) {
        studyWorld.value.sort((a, b) => a - b);
        const shuzu = bei.value.map((item, index) => {
            if (studyWorld.value.includes(index + 1)) {
                return bei.value[index];
            }
        });
        const arr = shuzu.flat();
        list.value = [];
        arr.forEach((item) => {
            let weizhi;
            do {
                weizhi = Math.floor(Math.random() * arr.length);
            } while (list.value[weizhi] !== undefined);
            list.value[weizhi] = item;
        });
        list.value = list.value.filter((v) => v !== undefined);
        let result = [];
        for (let i = 0; i < list.value.length; i += 5) {
            result.push(list.value.slice(i, i + 5));
        }
        list.value = result;
        defaults();
    }
};
const center = ref(null);
const goback = () => {
    center.value.open('center');
};
const fanhui = () => {
    uni.navigateBack();
};
</script>
<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> 剪纸盒 </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                mode="widthFix"
            />
        </view>
        <view class="body">
            <view class="btns" v-if="status == 2">
                <view
                    class="btn uni-row"
                    v-for="(item, index) in ['重新检查', '混组检查']"
                    :key="index"
                    @click="agin(index)"
                    :style="{
                        backgroundImage: `url(${
                            index === 0
                                ? '/static/img/wolrd/chengse.png'
                                : '/static/img/wolrd/hongse.png'
                        })`,
                        backgroundSize: '100% 100%'
                    }"
                >
                    {{ item }}
                </view>
            </view>
            <template v-else>
                <view
                    class="item uni-row"
                    v-for="(item, index) in list[query.index]"
                    :key="index"
                    @click="playAudio(item.id, item.detail.audio_file_name.word)"
                >
                    <view class="left uni-row">
                        <template v-if="returnStatus(item.id)">
                            <view
                                class=""
                                v-for="(i, iIndex) in item.detail.youdao_api.translation"
                                :key="index"
                            >
                                {{ i }}
                            </view>
                        </template>
                        <template v-else>
                            {{ item.name }}
                        </template>
                    </view>
                    <view class="right" :style="{ marginLeft: status == 0 ? '0' : '54rpx' }">
                        <image
                            @click.stop="remove(item.id)"
                            v-if="status == 0"
                            src="/static/img/wolrd/jianzi.png"
                            class="icon"
                        >
                        </image>
                        <image
                            @click.stop="ssss(item, 0)"
                            v-if="status == 1"
                            src="/static/img/wolrd/yes.png"
                            class="icon"
                        >
                        </image>
                        <image
                            @click.stop="ssss(item, 2)"
                            v-if="status == 1"
                            src="/static/img/wolrd/no.png"
                            class="icon"
                        >
                        </image>
                    </view>
                </view>
            </template>
        </view>
        <view class="bg uni-row">
            <view
                class="box"
                v-for="(ss, index) in boxStaus"
                :key="index"
                @click="studyStatus(index)"
            >
                <image
                    v-show="index == 1 || status != 0"
                    :src="images[index]"
                    class="img"
                    :class="index == 0 ? 'lv' : index == 1 ? 'lan' : 'lv'"
                >
                </image>
                <view class="num uni-row" v-if="ss.length">{{ ss.length }}</view>
            </view>
        </view>
    </view>
    <view class="footers uni-row" v-if="list.length > 1">
        <view class="icon uni-row" @click="last">
            <image src="/static/img/wolrd/last.png" class="last"></image>
        </view>
        <view class="liang"> {{ query.index + 1 }} / {{ list.length }} </view>
        <view class="icon uni-row" @click="next">
            <image src="/static/img/wolrd/next.png" class="next"></image>
        </view>
    </view>
    <uni-popup ref="center">
        <view class="wais">
            <view class="title"> 温馨提示 </view>
            <view class="label"> 确定要结束训练吗？ </view>
            <view class="footer uni-row">
                <view class="fou bt" @click="center.close()"> 否 </view>
                <view class="shi bt" @click="fanhui"> 是 </view>
            </view>
        </view>
    </uni-popup>
    <uni-popup ref="showButtomModel">
        <view class="wai">
            <view class="title"> 请选择您要混合的单词组合 </view>
            <view class="list uni-row">
                <view
                    class="item uni-row"
                    :class="studyWorld.includes(index + 1) ? 'active' : 'default'"
                    v-for="(item, index) in bei.length"
                    :key="index"
                    @click="add(index + 1)"
                >
                    {{ `第${numberToChinese(index + 1)}组 (5个)` }}
                </view>
            </view>
            <view class="btn uni-row" @click="tijiao"> 混组检查 </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="less">
.wrap {
    background-color: #ece4fb;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 28rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        padding: 24rpx 28rpx 0;

        .btns {
            .btn {
                justify-content: center;
                height: 88rpx;
                width: 524rpx;
                margin: 0 auto;
                font-weight: 500;
                font-size: 40rpx;
                color: #ffffff;

                &:nth-child(2) {
                    margin-top: 40rpx;
                }
            }
        }

        .item {
            margin-bottom: 24rpx;
            border-radius: 8rpx;
            overflow: hidden;

            .left {
                justify-content: center;
                flex: 1;
                height: 110rpx;
                font-weight: 500;
                font-size: 44rpx;
                color: #333333;
                width: 390rpx;
                background: #ffffff;
                border-radius: 24rpx;
            }

            .right {
                display: flex;
                align-items: center;

                .icon {
                    width: 108rpx;
                    height: 108rpx;

                    &:last-child {
                        margin-left: 36rpx;
                    }
                }
            }
        }

        .btn-area {
            .btn-item {
                justify-content: center;
                width: 148rpx;
                height: 116rpx;
                color: #fff;
                font-size: 32rpx;

                &.active {
                    background: #29b6fc;
                }

                &.default {
                    background-color: #ff9e30;
                }
            }
        }
    }

    .bg {
        justify-content: center;
        background-color: #fff;
        height: 356rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 4;
        align-items: end;
        padding-bottom: 40rpx;

        .lan {
            margin: 0 66rpx;
        }

        .box {
            position: relative;

            .lv,
            .hong {
                width: 160rpx;
                height: 160rpx;
            }

            .lan {
                width: 200rpx;
                height: 200rpx;
            }

            .num {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, 0);
                justify-content: center;
                width: 52rpx;
                height: 52rpx;
                background: #f63535;
                border-radius: 50%;
                font-weight: 500;
                font-size: 30rpx;
                color: #ffffff;
            }
        }
    }

    .shengyin {
        position: fixed;
        right: 28rpx;
        bottom: 200rpx;
        width: 60rpx;
    }
}

.footers {
    position: fixed;
    left: 50%;
    bottom: 364rpx;
    transform: translate(-50%, 0);
    justify-content: center;

    .liang {
        font-size: 24rpx;
        color: #333333;
        // margin: 0 26rpx;
    }

    .icon {
        justify-content: center;
        padding: 0 26rpx;
    }

    .last,
    .next {
        width: 40rpx;
        height: 40rpx;
    }
}

.wais {
    width: 606rpx;
    height: 378rpx;
    background: #f4eeff;
    border-radius: 64rpx;
    padding: 48rpx 96rpx;
    text-align: center;
    color: #333333;

    .title {
        font-size: 32rpx;
    }

    .label {
        font-size: 28rpx;
        margin: 38rpx 0 56rpx;
    }

    .footer {
        justify-content: space-between;

        .bt {
            width: 184rpx;
            height: 68rpx;
            font-size: 24rpx;
            line-height: 68rpx;
            border-radius: 36rpx;
        }

        .fou {
            color: #9561f3;
            border: 2rpx solid #9561f3;
        }

        .shi {
            background: #9561f3;
            color: #fff;
        }
    }
}

.wai {
    background: #ffffff;
    padding: 28rpx;
    min-height: 400rpx;
    border-radius: 32rpx 32rpx 0rpx 0rpx;

    .title {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
        text-align: center;
    }

    .list {
        margin-top: 56rpx;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
            justify-content: center;
            width: 298rpx;
            height: 70rpx;
            border-radius: 8rpx;
            font-weight: 400;
            font-size: 30rpx;
            margin-bottom: 20rpx;

            &.active {
                background: #f2ebff;
                color: #9561f3;
            }

            &.default {
                color: #999999;
                background: #f7f7f7;
            }
        }
    }

    .btn {
        justify-content: center;
        background: url('/static/img/wolrd/zise.png');
        background-size: 100% 100%;
        height: 88rpx;
        width: 524rpx;
        font-weight: 500;
        font-size: 40rpx;
        color: #ffffff;
        margin: 80rpx auto 0;
    }
}
</style>
